<template>
  <div>
  <jxf-titletip :title="title" :hasRefresh="false" :hasGoBack="true" @goBack="$emit('goBack')"></jxf-titletip>
  <div class="addAds mt20">
    <el-form :model="adsInfo" label-width="160px" ref="adsInfo" :rules="rules">
      <el-form-item label="广告名称：" required prop="name">
        <el-input v-model="adsInfo.name" placeholder="" clearable maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="展示对象：" prop="terminal" required>
        <el-select v-model="adsInfo.terminal" clearable placeholder="请选择">
          <el-option label="全部" value="0"></el-option>
          <el-option label="买家端" value="1"></el-option>
          <el-option label="卖家端" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="广告顺序：" required prop="sort">
        <el-input v-model="adsInfo.sort" placeholder="" clearable></el-input>
      </el-form-item>
      <el-form-item label="开始时间：" required prop="startTime">
        <el-date-picker
          v-model="adsInfo.startTime"
          type="datetime"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="FormatDate.timeFormat(new Date().getTime()).substring(10)"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="到期时间：" required prop="endTime">
        <el-date-picker
          v-model="adsInfo.endTime"
          type="datetime"
          placeholder="选择到期时间"
          :picker-options="pickerEnd"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="FormatDate.timeFormat(new Date().getTime()).substring(10)"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="上线/下线：" prop="status">
        <el-radio v-model="adsInfo.status" label="1">上线</el-radio>
        <el-radio v-model="adsInfo.status" label="0">下线</el-radio>
      </el-form-item>
      <el-form-item label="广告图片：" required prop="imgUrl">
        <img v-if="adsInfo.imgUrl" :src="adsInfo.imgUrl" class="avatar">
        <el-button type="primary" @click="showCropper" class="mt20">上传图片</el-button>
        <i>文件不能超过1MB</i>
      </el-form-item>
      <el-form-item label="广告链接：" prop="linkUrl">
        <el-input v-model="adsInfo.linkUrl" placeholder="" clearable></el-input>
      </el-form-item>
      <el-form-item label="广告备注：" prop="remark">
        <el-input v-model="adsInfo.remark" placeholder="" type="textarea" :rows="6" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
    <jxf-cropper
      :uploadUrl="uploadImg"
      :isShowCropper.sync="isShowCropper"
      :tCropWidth="tCropWidth"
      :tCropHeight="tCropHeight"
      :dealImage="adsInfo.imgUrl"
      :fixedBox="false"
      @getChangedImage="getChangedImage"
      :dataSize="5"></jxf-cropper>
  </div>
</template>

<script>
  import FormatDate from '@/assets/js/formatDate'
  export default {
    name: "AddAds",
    props: {
      dataInfo: {
        type: Object,
        default: () => {}
      },
      title: {
        type: String,
        default: ""
      }
    },
    data() {
      return {
        // 裁剪
        isShowCropper: false,
        tCropWidth: 400,
        tCropHeight: 400,
        /*----------------*/
        pickerStart: {
          disabledDate: time => {
            if(this.adsInfo.endTime) {
              return new Date(time).getTime() > new Date(this.adsInfo.endTime).getTime()
            }
          }
        },
        pickerEnd: {
          disabledDate: time => {
            if(this.adsInfo.startTime) {
              return new Date(time).getTime() < new Date(this.adsInfo.startTime).getTime()
            } else {
              return new Date(time).getTime() < new Date().getTime()
            }
          }
        },
        // 设置当前时间
        FormatDate: FormatDate,
        imageUrl: "",
        adsInfo: this.dataInfo,
        uploadImg: apis.operate.advUpload,
        header: {
          token: JSON.parse(window.localStorage.adminLogin).token
        } ,
        rules: {
          name: [
            { required: true, message: '广告名称不能为空', trigger: ['change', 'blur'] },
          ],
          terminal: [
            { required: true, message: '展示对象不能为空', trigger: ['change', 'blur'] },
          ],
          sort: [
            { validator: validate.pInteger, trigger: ['change', 'blur'] },
            { required: true, message: '广告顺序不能为空', trigger: ['change', 'blur'] },
          ],
          endTime: [
            { required: true, message: '到期时间不为空', trigger: ['change', 'blur'] },
          ],
          startTime: [
            { required: true, message: '开始时间不为空', trigger: ['change', 'blur'] },
          ],
          imgUrl: [
            { required: true, message: '广告图片不为空', trigger: ['change', 'blur'] },
          ]
        },
      }
    },
    methods: {
      // 显示裁剪
      showCropper() {
        this.isShowCropper = true;
      },

      getChangedImage(val) {
        this.adsInfo.imgUrl = val;
      },

      resetForm() {
        this.$refs['adsInfo'].resetFields()
      },

      submitForm() {
        this.$refs['adsInfo'].validate((valid) => {
          if (valid) {
            ajax.post(apis.operate.operateAdv, this.adsInfo).then(result => {
              if(result.code === '10000000') {
                this.$message({
                  type: 'success',
                  message: '操作成功!'
                });
                this.resetForm();
                this.$emit('fresh');
                this.$emit('goBack')
              } else {
                this.$message.error(result.message)
              }
            })
          }
        })
      }
    },
    watch: {
      dataInfo() {
        this.adsInfo = this.dataInfo
      },
    }
  }
</script>

<style lang="scss" scoped>
  .addAds {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
    background: #fff;
    border-radius: 4px;
    .el-form {
      width: 50%;
      min-width: 400px;
      .el-input {
        width: 300px;
      }
    }
  }
</style>
